/*
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2023-12-20 22:47:56
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2023-12-24 18:58:25
 * @FilePath: /tuberculosis_screening_display_system/src/components/GeneralChart/hooks.ts
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { onMounted, ref, watch, nextTick } from "vue";
import * as echarts from "echarts";

import _ from "lodash";

function createChart(container: HTMLElement, options = {}) {
  const chart = echarts.init(container, "customed");
  const padding = 18;
  const mergedOptions = _.merge(
    {
      title: {
        textStyle: {
          color: "#fff",
          rich: {
            title: {
              fontSize: 16,
              fontWeight: "bold",
              fontFamily: "Microsoft YaHei",
            },
            subtitle: {
              fontSize: 10,
              fontWeight: "bold",
              fontFamily: "Microsoft YaHei",
            },
          },
        },
        subtextStyle: {
          color: "#fff",
        },
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      legend: {
        right: "16px",
        textStyle: {
          color: "#fff",
        },
      },
      grid: {
        top: padding + 18,
        left: padding + 18,
        right: padding,
        bottom: padding,
      },
      xAxis: {
        type: "category",
        axisLabel: {
          interval: 0,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#fff",
          },
        },
        axisTick: {
          show: true,
          lineStyle: {
            color: "#fff",
          },
        },
      },
      yAxis: {
        splitLine: {
          lineStyle: {
            type: "dashed",
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#fff",
          },
        },
        axisTick: {
          show: true,
          lineStyle: {
            color: "#fff",
          },
        },
      },
      series: [],
    },
    options
  );
  chart.setOption(mergedOptions);
  return chart;
}

export function useGeneralChart(props, context) {
  const containerRef = ref<HTMLElement>();
  let chart: echarts.ECharts;
  onMounted(() => {
    chart = createChart(containerRef.value, {
      title: {
        text: [`{title|${props.title}}`, `{subtitle|${props.subTitle || ""}}`].join(
          " "
        ),
      },
    });
  });

  function genOptions(props) {
    const labels = props.data.map((item) => item[props.label]);

    const series = props.legend.map(({ key, label }) => {
      return {
        type: "bar",
        barWidth: "32",
        name: label,
        // stack: "stack",
        data: props.data.map((item) => item[key]),
      };
    });
    return {
      xAxis: {
        data: labels,
      },
      series,
    };
  }
  watch(
    () => props.data,
    () => {
      const options = genOptions(props);
      chart.setOption(options);
    }
  );

  watch(props.height, () => {
    chart.resize();
  });
  window.addEventListener("resize", () => {
    chart.resize();
  });

  return {
    containerRef,
  };
}
